<template>
  <n-float-button
    @click="changeDrawer"
    :right="0"
    top="50%"
    shape="square"
    type="primary"
  >
    <n-icon>
      <SettingsOutline />
    </n-icon>
  </n-float-button>

  <div>
    <n-drawer v-model:show="active" :width="380" :placement="placement">
      <n-drawer-content closable title="偏好设置">
        <n-tabs type="segment" animated>
          <n-tab-pane name="appearance" tab="外观">
            <appearance />
          </n-tab-pane>
          <n-tab-pane name="layout" tab="布局">
            <layout />
          </n-tab-pane>
          <n-tab-pane name="common" tab="通用">
            <common />
          </n-tab-pane>
        </n-tabs>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted} from "vue";
import { SettingsOutline, CloseOutline } from "@vicons/ionicons5";
import Appearance from "@/components/floatbtn/Appearance.vue";
import Layout from "@/components/floatbtn/Layout.vue";
import Common from "@/components/floatbtn/Common.vue";

const active = ref(false);

onMounted(() => { });

const changeDrawer = () => {
  active.value = !active.value;
};
</script>
<style scoped lang='scss'>
.n-float-button.n-float-button--square-shape {
  border-radius: 3px 0 0 3px;
}
</style>